$(function () {
    let arr = $(["../img/1.jpg", "../img/2.jpg", "../img/3.jpg", "../img/4.jpg", "../img/5.jpg"])
    let imgWrap = $(".img-wrap")
    let img = $(".img-wrap>img")
    let li = $(".list>ul>li")
    let container = $(".container")
    //图片下标初始为0
    let index = 0
    //定时器
    let id
    container.mouseenter(function () {
        if (id) {
            clearInterval(id);
        }
    })
    container.mouseleave(function () {
        run()
    })

    function run() {
        $(function () {
            if (id) {
                clearInterval(id)
            }
            id = setInterval(function () {
                index++
                if (index > arr.length - 1) {
                    index = 0
                }
                let imgSrc = arr[index]
                img.attr("src", imgSrc)

                //同步修改li的class属性
                $.each(li, function (i) {
                    $(this).attr("class", "")
                    if (i == index) {
                        $(this).attr("class", "change")
                    }
                })
            }, 1000)
        })
    }
    run()

    $(function () {
        // if (id) {
        //     clearInterval(id);
        // }
        $.each(li, function (inde) {
            $(this).mouseover(function () {
                $.each(li, function (i) {
                    $(this).attr("class", "")
                    if (inde == i) {
                        $(this).attr("class", "change")
                    }

                    //修改img的图片
                    index = inde;
                    let img1 = arr[index];
                    img.attr("src", img1)
                })
            })
        })

    })

})